@using FluentBlog.ViewComponents
<!DOCTYPE HTML>
<html>
<head>
    <title>@(ViewBag.Title + ViewBag.Settings["BlogName"])</title>
    @if (!string.IsNullOrEmpty(ViewBag.Settings["Favicon"]))
    {
        <link rel="shortcut icon" type="image/x-icon" href="@ViewBag.Settings["Favicon"]" />
    }
    <meta name="viewport" content="width=device-width" />
    <link href="~/css/reset.css" rel="stylesheet" />

    <environment include="Development">
        <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.js"></script>
        <script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
    </environment>

    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    </environment>

    <link href="~/lib/FDBootstrap/css/fluent.css" rel="stylesheet" />
    <link href="~/lib/micon/css/micon.min.css" rel="stylesheet" />


    @if (IsSectionDefined("HeadScripts"))
    {
        @await RenderSectionAsync("HeadScripts", required: false)
    }

    <link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
</head>
<body>
<header id="top"></header>
<div class="container-fluid m-0">
    <!-- 主体 -->
    <div class="row" id="background" style="background-image: url(/images/backround.svg); background-attachment: fixed">
        <!-- 顶部导航（移动端） -->
        <div class="col-12 d-md-none d-block shadow p-0">
            <div class="row bg-white text-dark m-0 p-3">
                <div class="col-8 offset-2 text-center">
                    <h4 class="font-weight-bold m-0">@ViewBag.Settings["BlogName"]</h4>
                </div>
                <button class="navbar-toggler shadow-none" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <i class="mi mi-GlobalNavigationButton"></i>
                </button>
            </div>
            <div class="collapse navbar-collapse bg-white border-top" id="collapsibleNavbar">
                <a class="btn btn-block m-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="Index" asp-route-slug="@null" asp-route-page="">
                    <i class="mi mi-Home"></i>
                    首页
                </a>
                <a class="btn btn-block m-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="Filing">
                    <i class="mi mi-Folder"></i>
                    归档
                </a>
                <a class="btn btn-block m-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="Friend">
                    <i class="mi mi-Link"></i>
                    友链
                </a>
                <a class="btn btn-block m-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="About">
                    <i class="mi mi-Info"></i>
                    关于
                </a>
            </div> 
        </div>
        
        <!-- 侧边栏 -->
        <div class="offset-1 col-md-2 d-md-block d-none px-0 bg-white shadow">
            <div class="nav sticky-top flex-column" id="sidebar">
                <!-- 头像 -->
                @{
                    string avatar = string.IsNullOrEmpty(ViewBag.Settings["Avatar"]) ? "images/defaultAvatar.jpg" : ViewBag.Settings["Avatar"];
                }
                <img class="m-auto rounded-circle" src="@avatar" id="avator" alt="">
                <div>
                    <h4 class="text-center py-3 m-0">@ViewBag.Settings["BlogName"]</h4>
                </div>
                <!-- 简介 -->
                <div class="text-center pb-3 px-4 text-secondary small">
                    @ViewBag.Settings["BlogIntro"]
                </div>
                <!-- 按钮 -->
                <div class="py-4 border-top">
                    <a class="btn btn-block mx-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="Index" asp-route-slug="@null" asp-route-page="">
                        <i class="mi mi-Home"></i>
                        首页
                    </a>
                    <a class="btn btn-block mx-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="Filing">
                        <i class="mi mi-Folder"></i>
                        归档
                    </a>
                    <a class="btn btn-block mx-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="Friend">
                        <i class="mi mi-Link"></i>
                        友链
                    </a>
                    <a class="btn btn-block mx-0 shadow-none nav-btn square" data-ajax-update="#content" data-ajax="true" asp-controller="Home" asp-action="About">
                        <i class="mi mi-Info"></i>
                        关于
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="row">
                <!-- 文章卡片区 -->
                <div class="col-md-9 pt-4 pb-0 px-4" id="content">
                    @RenderBody()
                    <!-- 页尾（正常） -->
                    <div class="d-none d-md-block">
                        @{ await Html.RenderPartialAsync("_Footer"); }
                    </div>
                </div>
                <!-- 右侧边栏 -->
                <div class="col-md-3 pt-4 px-4 px-md-0" id="second-sidebar">
                    <!-- 公告栏 -->
                    @if (!string.IsNullOrEmpty(ViewBag.Settings["Notice"]))
                    {
                        <div class="card shadow p-3 mb-4">
                            <div class="card-header bg-white px-1 py-2">
                                <h5 class="font-weight-normal"><i class="mi mi-Sticker2"></i> 公告栏</h5>
                            </div>
                            <div class="card-body p-1">
                                <p class="p-2 m-0 small">@ViewBag.Settings["Notice"]</p>
                            </div>
                        </div>
                    }
                    <!-- 其他自定义栏位 -->
                    @if (IsSectionDefined("SecondSidebar"))
                    {
                        @await RenderSectionAsync("SecondSidebar", required: false)
                    }
                    <!-- 页尾（小屏） -->
                    <div class="d-md-none d-block">
                        @{ await Html.RenderPartialAsync("_Footer"); }
                    </div>
                </div>
            </div>
        </div>
        <!-- 工具栏 -->
        <div class="col-md-1 d-md-block d-none fixed-bottom ml-auto">
            <div class="btn-group-vertical m-0">
                <!-- 后台管理 -->
                <a type="button" class="btn toolbar bg-white shadow flex-center p-1" data-toggle="tooltip" data-placement="left" title="后台管理"
                   asp-controller="Admin" asp-action="EditArchive">
                    <i class="mi mi-Settings mi-lg"></i>
                </a>
                <!-- 返回顶部 -->
                <button type="button" class="btn toolbar bg-white shadow p-1" data-toggle="tooltip" data-placement="left" title="返回顶部"
                        onclick="location.href = '#top'">
                    <i class="mi mi-ChevronUp mi-lg"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        // 初始化Tooltip
        $('[data-toggle="tooltip"]').tooltip();
        $('.nav-btn').hover(
            function() {
                $(this).addClass('bg-gray text-white');
            },
            function() {
                $(this).removeClass('bg-gray text-white');
            }
        );
    });
</script>

@if (IsSectionDefined("BottomScripts"))
{
    @await RenderSectionAsync("BottomScripts", required: false)
}
</body>
</html>